<template>
  <div class="order-detail-content">
    <header class="header-fiexed back-header">
      <van-nav-bar :title="$route.meta.head.title"
                   left-arrow
                   @click-left="$router.go(-1)" />
    </header>
    <div v-if="order_info">
      <!-- 订单顶部信息 -->
      <div class="order-header">
        <div class="order-state">
          <div class="state">{{order_info.state_desc}}</div>
          <!-- <div class="order-desc">{{order_info.description}}</div> -->
        </div>
      </div>

      <div class="address-info flex order-ma-top align-center">
        <img class="address-icon"
             src="@/assets/image/address-icon.png" />
        <div class="info flex-sub">
          <div class="user-info">
            <span>{{order_info.reciver_name}}</span>
            <span>{{order_info.reciver_phone}}</span>
          </div>
          <div class="address-detail">{{order_info.reciver_addr}}</div>
        </div>
      </div>

      <!-- 订单价格信息 -->
      <div class="order-detail info-block">
        <!-- 店铺信息 -->
        <!-- <div class="store-info flex align-center">
          <img :src="order_info.store.store_logo"
               class="store-icon" />
          <div class="store-name flex-sub">{{order_info.store_name}}</div>
        </div> -->

        <!-- 商品信息 -->
        <div class="goods-block"
             v-for="item in order_info.goods_list"
             :key="item.goods_id">
          <goods-module module-name="goods1n"
                        goodsImg="image_url"
                        goodsName="goods_name"
                        goodsPrice="goods_price"
                        goodsId="goods_id"
                        goodsUrl="goods_url"
                        goodsNum="goods_num"
                        :list="[item]"
                        @clickGoods="clickGoods">
          </goods-module>
          <!-- <div class="btn-group flex justify-end">
            <van-button class="btn-item"
                        plain
                        round
                        v-if="order_info.if_complain"
                        @click="complaint(order_info.order_id,item.rec_id)">投诉</van-button>
            <van-button class="btn-item"
                        plain
                        round
                        v-if="item.refund=='1'"
                        @click="refund(1,item.rec_id)">退款</van-button>
            <van-button class="btn-item"
                        plain
                        round
                        v-if="item.refund=='1'"
                        @click="refund(2,item.rec_id)">退货</van-button>
          </div> -->
        </div>
      </div>

      <!-- 价格信息 -->
      <div class="menu-list info-block">
        <div class="menu-item">
          <div class="lable">商品总计</div>
          <div class="text-price">{{order_info.goods_amount}}</div>
        </div>
        <div class="menu-item">
          <div class="lable">配送费</div>
          <div class="text-price">{{ order_info.shipping_fee }}</div>
        </div>
        <div class="menu-item">
          <div class="lable">实付</div>
          <div class="text-price highlight">{{order_info.order_amount}}</div>
        </div>
      </div>

      <!-- 信息块 -->
      <div class="info-block menu-list">
        <div class="title solid-bottom">订单信息</div>
        <div class="menu-list">
          <div class="menu-item">
            订单编号：{{ order_info.order_sn }}
          </div>
          <div class="menu-item">
            下单时间：{{ order_info.add_time }}
          </div>
          <div class="menu-item"
               v-show="order_info.payment_name !== ''">
            支付方式：{{ order_info.payment_name }}
          </div>
        </div>
      </div>

      <!-- 信息块 -->
      <!-- <div class="info-block">
        <div class="title">商家信息</div>
        <div class="store-info-name">{{order_info.store_name}}</div>
        <div class="store-info">
          <store-contact-info :store-info="order_info.store"
                              address="store_address"
                              lng="store_longitude"
                              lat="store_latitude"
                              phone="store_phone"
                              store-name="store_name"></store-contact-info>
        </div>
      </div> -->

      <!-- 订单底部 -->
      <div class="foot">
        <div class="fixed-foot flex justify-end">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderInfo } from '@/api/memberOrder'
import GoodsModule from '@/components/GoodsModule'
export default {
  name: 'OrderDetail',
  data() {
    return {
      order_info: {},
      rec_id: 0,
      popupRefund: false
    }
  },

  components: {
    GoodsModule
  },

  created: function() {
    if (this.$route.query.order_id) {
      getOrderInfo(this.$route.query.order_id)
        .then(res => {
          this.order_info = res.result.order_info
        })
        .catch(error => {
          this.$toast({
            type: 'fail',
            message: error.message
          })
        })
    }
  },

  methods: {
    showRefund(recId) {
      this.rec_id = recId
      this.popupRefund = true
    },
    refund(type, recId) {
      this.rec_id = recId
      this.$router.push({
        name: 'MemberReturnForm',
        query: {
          type: type,
          order_id: this.order_info.order_id,
          order_goods_id: this.rec_id
        }
      })
    },

    complaint(orderId, goodsId) {
      this.$router.push({
        name: 'MemberComplaintForm',
        query: { order_id: orderId, goods_id: goodsId }
      })
    },

    /**
     * 点击商品跳转
     */
    clickGoods(info) {
      this.$router.push({
        name: 'GoodsDetail',
        query: { goods_id: info.goods_id }
      })
    }
  }
}
</script>
<style lang="scss">
.order-detail-content {
  font-size: 13px;
  .highlight {
    color: $mainColor;
  }
  .back-header {
    /deep/ .van-nav-bar {
      background-color: #000000;
      .van-nav-bar__title {
        color: #fff;
      }
      .van-icon.van-icon-arrow-left {
        color: #fff !important;
      }
    }
    [class*='van-hairline']::after {
      border-color: #000000;
    }
  }

  .order-header {
    height: 145px;
    background-color: #000000;

    .order-state {
      padding: 20px;
      .state {
        font-size: 17px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #ffffff;
      }
      .order-desc {
        font-size: 12px;
        color: #ffffff;
      }
    }
  }

  // 地址模块
  .address-info {
    width: 355px;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 18px 15px;
    margin: -50px auto 0 auto;
    .address-icon {
      width: 28px;
      height: 28px;
    }
    .add-address {
      margin-left: 10px;
      color: #333333;
      font-size: 12px;
    }
    .info {
      margin-left: 10px;
      width: 250px;
      .user-info {
        color: #333333;
        font-size: 14px;
        font-weight: 550;
        margin-bottom: 10px;
        span {
          margin-right: 5px;
        }
      }
      .address-detail {
        width: 100%;
        color: #666666;
        font-size: 14px;
      }
    }
    .right-icon {
      font-size: 16px;
      color: #666666;
    }
  }

  .goods-block {
    width: 100%;
  }
  .goods-block + .goods-block {
    border-top: 1px solid #e5e5e5;
  }

  // 订单基础信息
  .order-detail {
    width: 355px;
    // padding: 0 15px;
    margin: 0 auto 0 auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    // 店铺信息
    .store-info {
      height: 45px;
      padding: 10px;
      .store-icon {
        width: 18px;
        height: 18px;
        border-radius: 9px;
        margin-right: 8px;
      }
      .store-name {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }

  // 价格信息
  .menu-list {
    width: 355px;
    margin: 0 auto 0 auto;
    border-radius: 7.5px;
    overflow: hidden;
    .menu-item {
      padding: 0 10px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
      .lable {
        font-size: 13px;
        color: #666666;
      }
      .text-price {
        font-size: 11px;
      }
      .highlight {
        font-size: 15px;
      }
    }
  }

  .info-block {
    margin-top: 15px;
    background-color: #ffffff;
    .title {
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      color: #333333;
      font-size: 15px;
      position: relative;
    }
  }
}

// 订单底部
.foot {
  height: 20px;
  width: 100%;
  .fixed-foot {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #e5e5e5;
    height: auto;
    .btn-item {
      width: 75px;
      padding: 0;
      height: 35px;
      line-height: 35px;
      margin: 10px;
      color: #999999;
      border-color: #cccccc;

      &.highlight {
        color: $mainColor;
        border-color: $mainColor;
      }
    }
  }
}

// .btn-group {
//   .btn-item {
//     width: 75px;
//     height: 30px;
//     line-height: 30px;
//     margin: 10px 5px;
//     color: #999999;
//     border-color: #cccccc;
//   }
// }
</style>
